<template>
  <div>
    <div>
      <button @click="handleBack">返回</button>
      <button @click="handleSendData">向子应用发送数据</button>
      <button @click="handleJump">跳转到子应用about页面</button>
    </div>
    <div id="sub-app-2"></div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { onMounted, onUnmounted } from "vue";
import { customLog } from "@/utils/log";
import { bus, setupApp, startApp, destroyApp } from "wujie";

const router = useRouter();

const handleBack = () => {
  router.back();
};

bus.$on("sub-data-change", (data) => {
  customLog(`接收到${data.sub}传递的数据`, data);
});

const handleSendData = () => {
  bus.$emit("main-data-change", {
    name: "rose",
    age: 18,
  });
};

const handleJump = () => {
  router.push({ path: "/sub-app-2", query: { "sub-app-2": "about" } });
};

onMounted(() => {
  setupApp({
    name: "sub-app-2",
    url: "http://localhost:3005",
    exec: true,
    alive: false,
    el: document.getElementById("sub-app-2"),
    sync: true,
    props: {
      name: "job",
      age: 20,
      jump: (path) => router.push(path),
    },
  });
  startApp({ name: "sub-app-2" });
});
onUnmounted(() => {
  destroyApp("sub-app-2");
});
</script>
